<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name=”viewport” content=”width=device-width,height=device-height, initial-scale=1″ />
    <title>echart</title>
    
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./echarts.min.js"></script>
    <script type="text/javascript" src="./china.js"></script>
    <style>
        #main{
            width: 100%;
            height:768px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body >
    <div id="main"></div>
    <script type="text/javascript">

//初始化

var myChart = echarts.init(document.getElementById('main'));
var data = [];
var geoCoordMap = {
    '黑龙江哈尔滨':[121.15,31.89],
    '湖北荆州':[109.781327,39.608266],
    '河南信阳':[120.38,37.35],
    '湖南益阳':[122.207216,29.985295],
    '黑龙江佳木斯':[123.97,47.33],
    '江苏盐城':[120.13,33.38],
    '湖南邵阳':[118.87,42.28],
    '江西上饶':[120.33,36.07],
    '湖南株洲':[121.52,36.89],
    '吉林吉林':[102.188043,38.520089],
    '江苏淮安':[118.58,24.93],
    '黑龙江牡丹江':[120.53,36.86],
    '江苏南通':[119.46,35.42],
    '四川宜宾':[119.97,35.88],
    '湖北天门':[121.05,32.08],
    '湖南湘潭':[91.11,29.97],
    '安徽马鞍山':[112.02,22.93],
    '广东云浮':[116.1,24.55],
    '黑龙江大庆':[122.05,37.2],
    '江苏常州':[121.48,31.22],
    '吉林松原':[101.718637,26.582347],
    '黑龙江绥化':[122.1,37.5],
    '安徽芜湖':[117.93,40.97],
    '湖南怀化':[118.1,24.46],
    '吉林白城':[115.375279,22.786211],
    '四川成都':[116.63,23.68],
    '江苏连云港':[124.37,40.13],
    '江苏扬州':[121.1,31.45],
    '安徽阜阳':[103.79,25.51],
    '广东湛江':[121.39,37.52],
    '黑龙江双鸭山':[119.3,26.08],
    '湖南岳阳':[121.979603,39.627114],
    '山东东营':[120.45,36.38],
    '辽宁盘锦':[123.97,41.97],
    '天津':[102.52,24.35],
    '江西宜春':[114.87,40.82],
    '安徽蚌埠':[113.57,37.85],
    '湖南永州':[119.942327,37.177017],
    '重庆重庆':[120.1,30.86],
    '湖南常德':[116.69,23.39],
    '宁夏银川':[120.95,31.39],
    '上海上海':[121.56,29.86],
    '黑龙江齐齐哈尔':[110.359377,21.270708],
    '湖北黄冈':[116.35,23.55],
    '湖北孝感':[122.41,37.16],
    '辽宁阜新':[119.16,34.59],
    '河北保定':[120.836932,40.711052],
    '湖北襄樊':[120.74,31.64],
    '江西吉安':[113.75,23.04],
    '四川南充':[114.68,23.73],
    '江西萍乡':[119.15,33.5],
    '湖南衡阳':[119.9,32.49],
    '湖南长沙':[108.33,22.84],
    '湖南娄底':[122.18,40.65],
}; 

function refresh(){
    $.ajax({
            url:'http://localhost/workspace/db.php',
            type:'get',
            success(req){
                         var dataStr = JSON.parse(req); 
                   // 把字符串类型数值转换成浮点型数值
                   for (var i = dataStr.length - 1; i >= 0; i--) {
                            var dataNum = {};
                            dataNum.name = dataStr[i].name;
                            dataNum.value = parseFloat(dataStr[i].value);
                            data.push(dataNum);
                   }

                getData(data);//设置series的值
                getOption(series);
                 myChart.setOption(option);
            },
            error(){
                console.log('fail')
            }
        });
}


var series = [];


var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
             var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    // 获取series的值
var getData = function(data){
        series = [{
        name: 'price',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: function(val) {
            return val[2]*10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#ddb926'
            }
        }
    }, {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(data.sort(function(a, b) {
            return b.value - a.value;
        }).slice(0, 6)),
        symbolSize: function(val) {
            return val[2] * 10;
        },
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        zlevel: 1
    }];
    
    }
function getOption(series){
option = {
    backgroundColor: '#404a59',
    title: {
        text: '全国水稻单价',
        subtext: '数据来源：惠农网',
        sublink: 'http://www.cnhnb.com/',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['price'],
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series:series
};
}
refresh();
// getOption(series);
// myChart.setOption(option);

    </script>
</body>
</html>

